<script setup lang="ts">
import { VueDraggable } from "vue-draggable-plus";
import FormComponent from "./FormComponent.vue";
import { computed, onBeforeMount, ref, watch } from "vue";
import type {
  FormDesignerComponents,
  FormItemPerm
} from "../FormComponentMixin";
import { isDisplay } from "../FormItem";

defineOptions({
  name: "CardLayout"
});

const props = defineProps({
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  },
  rules: {
    type: Object,
    default: {}
  }
});

const _value = defineModel();
const _active = defineModel<FormDesignerComponents>("active");
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");

const freeMode = computed(() => props.mode === "free");

const handleItemValueChange = (item, val) => {
  if (
    _value.value &&
    Object.prototype.hasOwnProperty.call(_value.value, item.code)
  ) {
    _value.value[item.code] = val;
  }
};
</script>

<template>
  <div class="card-container">
    <el-card :body-style="{ padding: '10px' }" shadow="never">
      <template #header>
        <div class="card-header">
          {{ config.name }}
        </div>
      </template>
      <vue-draggable
        v-model="config.props.columns"
        :animation="150"
        group="FormDesign"
        :disabled="!freeMode"
        :ghostClass="freeMode ? 'w-f-cp-select' : ''"
        :class="{ 'w-f-cp-ct': freeMode }"
      >
        <template v-for="(item, idx) in config.props.columns" :key="item.id">
          <div v-if="isDisplay(perm, item.code)">
            <template
              v-if="config.props.isSubform && config.props.isSubform === true"
            >
              <el-form-item
                v-if="item.props.isFormItem"
                :label="item.name"
                :required="item.props.required"
                :prop="'[' + config.code + '].' + item.code"
                @click.stop="_active = item"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode,
                  'w-form-cp-nlb': item.props.hideLabel
                }"
              >
                <template
                  v-if="
                    _value &&
                    Object.prototype.hasOwnProperty.call(_value, item.code)
                  "
                >
                  <FormComponent
                    :index="idx"
                    :parents="config.props.columns"
                    :config="item"
                    :mode="mode"
                    v-model="_value[item.code]"
                    v-model:active="_active"
                    :type="item.type"
                  />
                </template>
                <template v-else>
                  <FormComponent
                    :index="idx"
                    :parents="config.props.columns"
                    :config="item"
                    :mode="mode"
                    v-model="_value"
                    v-model:active="_active"
                    :type="item.type"
                    @change="handleItemValueChange"
                  />
                </template>
              </el-form-item>
              <FormComponent
                v-else-if="
                  item.props.isSubform && item.props.isSubform === true
                "
                :config="item"
                v-model="_value[item.code]"
                v-model:active="_active"
                :mode="mode"
                :type="item.type"
                @click.stop="_active = item"
                :index="idx"
                :rules="props.rules"
                :parents="config.props.columns"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode
                }"
              />
              <FormComponent
                v-else
                :config="item"
                v-model="_value"
                v-model:active="_active"
                :mode="mode"
                :type="item.type"
                @click.stop="_active = item"
                :index="idx"
                :rules="props.rules"
                :parents="config.props.columns"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode
                }"
              />
            </template>
            <template v-else>
              <el-form-item
                v-if="item.props.isFormItem"
                :label="item.name"
                :required="item.props.required"
                :prop="item.code"
                @click.stop="_active = item"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode,
                  'w-form-cp-nlb': item.props.hideLabel
                }"
              >
                <FormComponent
                  :index="idx"
                  :parents="config.props.columns"
                  :config="item"
                  :mode="mode"
                  v-model="_value[item.code]"
                  v-model:active="_active"
                  :type="item.type"
                  @change="handleItemValueChange"
                />
              </el-form-item>
              <FormComponent
                v-else-if="
                  item.props.isSubform && item.props.isSubform === true
                "
                :config="item"
                v-model="_value[item.code]"
                v-model:active="_active"
                :mode="mode"
                :type="item.type"
                @click.stop="_active = item"
                :index="idx"
                :rules="props.rules"
                :parents="config.props.columns"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode
                }"
              />
              <FormComponent
                v-else
                :config="item"
                v-model="_value"
                v-model:active="_active"
                :mode="mode"
                :type="item.type"
                @click.stop="_active = item"
                :index="idx"
                :rules="props.rules"
                :parents="config.props.columns"
                :class="{
                  'w-form-d-item': freeMode,
                  'w-form-cp-active': _active?.id === item.id && freeMode
                }"
              />
            </template>
          </div>
        </template>
      </vue-draggable>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
@use "/src/assets/style/form/global";
.card-container {
  :deep(.el-card__header) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    padding-right: $base-padding !important;
    padding-left: $base-padding !important;
    background-color: $base-border-color-extra-light;
    font-size: 16px;
  }
}

:deep(.w-f-cp-ct) {
  width: 100%;
  min-height: 50px;
  background-color: white;
}

.w-f-cp-select {
  border: 1px dashed var(--el-color-primary) !important;
  border-radius: 2px;
}
</style>
